<template>
  <div class="account-setting-container">
    <el-card class="account-setting-card" v-show="isChildRoute">
      <el-tabs type="border-card">
        <el-tab-pane label="账号管理">
          <!-- TODO:绑定邮箱的功能实现,邮箱需要进行验证 -->
          <el-row class="account-management" type="flex" align="middle">
            <el-col :span="2">
              <div style="display: flex; justify-content: space-between">
                <span>绑</span>
                <span>定</span>
                <span>邮</span>
                <span>箱</span>
              </div>
            </el-col>
            <el-col :span="11" :offset="7">
              <span style="color: red; font-size: 15px"
                >绑定邮箱后，可以使用邮箱登录，同时可以通过邮箱找回密码</span
              >
            </el-col>
            <el-col :span="4" >
              <el-button type="primary" plain size="medium" @click="handleChangeEmailClick">绑定</el-button>
            </el-col>
          </el-row>
          <el-row class="account-management" type="flex" align="middle">
            <el-col :span="2">
              <div style="display: flex; justify-content: space-between">
                <span>密</span>
                <span>码</span>
              </div>
            </el-col>
            <el-col :span="8" :offset="10">
              <span style="color: red; font-size: 15px"
                >修改密码存在风险，请谨慎操作</span
              >
            </el-col>
            <el-col :span="4">
              <el-button
                type="danger"
                plain
                size="medium"
                @click="handleChangePasswordClick"
                >修改</el-button
              >
            </el-col>
          </el-row>
          <el-row class="account-management" type="flex" align="middle">
            <el-col :span="2">
              <div style="display: flex; justify-content: space-between">
                <span>账</span>
                <span>号</span>
                <span>注</span>
                <span>销</span>
              </div>
            </el-col>
            <el-col :span="8" :offset="10">
              <span style="color: red; font-size: 15px"
                >注销账号后，账号将无法恢复</span
              >
            </el-col>
            <el-col :span="4">
              <el-button
                type="danger"
                plain
                size="medium"
                @click="handleAccountCancelClick"
                >注销</el-button
              >
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 修改密码和账号注销的路由 -->
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "accountSetting",
})
export default class accountSetting extends Vue {
  // 使用计算属性的缓存功能，避免重复计算
  get isChildRoute() {
    // console.log(this.$route.name);
    // route有name,path,hash,query,fullPath,matched等属性
    const ans: boolean =
      this.$route.name === "changePassWord" ||
      this.$route.name === "accountCancel" ||
      this.$route.name === "changeEmail";
    // console.log(ans);
    // 不是的话取非显示子组件
    return !ans;
  }
  // 点击修改密码时的编程式路由跳转
  handleChangePasswordClick() {
    this.$router.push({ name: "changePassWord" });
  }
  // 点击账号注销时的编程式路由跳转
  handleAccountCancelClick() {
    this.$router.push({ name: "accountCancel" });
  }
  // 点击绑定邮箱时的编程式路由跳转
  handleChangeEmailClick() {
    this.$router.push({ name: "changeEmail" });
  }
}
</script>

<style lang="scss" scoped>
.account-setting-container {
  width: 100%;
  height: 100%;
  .account-setting-card {
    width: 100%;
    height: 100%;
    .account-management {
      margin-top: 20px;
      margin-bottom: 40px;
    }
  }
}
</style>